<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>更新库存数量</title>
  <style>
    /* 全局样式 */
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background-color: #f4f4f4;
    }

    /* 外层容器样式 */
    .wrapper {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      margin: 20px;
    }

    /* 闪卡容器样式 */
    .card {
      perspective: 150rem;
      position: relative;
      height: 20rem; /* 调整高度 */
      width: 15rem; /* 调整宽度 */
      margin: 2rem;
      box-shadow: none;
      background: none;
    }

    .card-side {
      height: 100%;
      width: 100%;
      border-radius: 15px;
      transition: all 0.8s ease;
      backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      padding: 1rem; /* 调整内边距 */
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem; /* 调整字体大小 */
      text-align: center;
    }

    .card-side.front {
      background-color: #0093E9;
      background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
      transform: rotateY(0deg);
    }

    .card-side.back {
      background-color: #4158D0;
      background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
      transform: rotateY(180deg);
    }

    .card:hover .card-side.front {
      transform: rotateY(180deg);
    }

    .card:hover .card-side.back {
      transform: rotateY(0deg);
    }

    /* 表单容器样式 */
    .container {
      padding: 40px;
      width: 350px;
    }

    /* 标题样式 */
    h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

    /* 表单组样式 */
    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      color: #555;
    }

    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 14px;
    }

    /* 提交按钮样式 */
    .submit-button {
      width: 100%;
      padding: 12px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      font-size: 14px;
    }

    .submit-button:hover {
      background-color: #0056b3;
    }

    /* 返回按钮样式 */
    .return-button {
      display: block;
      text-align: center;
      margin-top: 20px;
      padding: 12px;
      background-color: #6c757d;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      font-size: 14px;
    }

    .return-button:hover {
      background-color: #5a6268;
    }

    /* 错误提示样式 */
    .error-message {
      color: red;
      font-size: 14px;
      text-align: center;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <!-- 闪卡容器 -->
  <div class="card">
    <div class="card-side front">
      <div>库存管理</div>
    </div>
    <div class="card-side back">
      <div>更新库存数量</div>
    </div>
  </div>

  <!-- 表单容器 -->
  <div class="container">
    <h2>更新库存数量</h2>
    <%
      String error = request.getParameter("error");
      if (error != null) {
        if (error.equals("missing_parameters")) {
    %>
    <p class="error-message">请填写饮品ID和新的库存数量。</p>
    <%
    } else if (error.equals("invalid_parameters")) {
    %>
    <p class="error-message">请输入有效的饮品ID和库存数量。</p>
    <%
    } else if (error.equals("failed")) {
    %>
    <p class="error-message">更新库存数量失败，请重试。</p>
    <%
        }
      }
    %>
    <form action="${pageContext.request.contextPath}/stock/update" method="post" id="updateForm">
      <div class="form-group">
        <label for="drinkIdUpdate">饮品ID</label>
        <input type="text" id="drinkIdUpdate" name="drinkId" placeholder="请输入要更新库存数量的饮品ID" required>
      </div>
      <div class="form-group">
        <label for="newQuantity">新库存数量</label>
        <input type="number" id="newQuantity" name="newQuantity" placeholder="请输入新的库存数量" required>
      </div>
      <button type="submit" class="submit-button">更新</button>
    </form>
    <a href="${pageContext.request.contextPath}/stock/viewAll" class="return-button">返回库存列表</a>
  </div>
</div>

<script>
  document.getElementById('updateForm').addEventListener('submit', function (e) {
    const drinkId = document.getElementById('drinkIdUpdate').value;
    const quantity = document.getElementById('newQuantity').value;

    if (!/^\d+$/.test(drinkId)) {
      alert('饮品ID必须为数字');
      e.preventDefault();
    }


    if (isNaN(quantity) || quantity <= 0) {
      alert('库存数量必须为正整数');
      e.preventDefault();
    }
  });
</script>
</body>
</html>